<template>
	<view class="">
		<view class="topbox">
			<view :class="flagwith?'title':'titles'" v-for="(item,index) in titlelist" :key="index">
				<view :class="current==index?'selectname':'name'" @click="dianji(index)">
					{{item.name}}
				</view>
				<view class="anglebox" v-if="item.flags">
					<view :class="item.flag?'anlges':'anlgess'"></view>
					<view :class="item.flag?'anlgesxia':'anlgesxias'"></view>
				</view>
				<image v-if="item.img"  src="../../static/shaixuan.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// titlelist: [{
				// 	name: "区域",
				// 	flags: false,
				// 	img: false //判断是否要图片
				// }, {
				// 	name: "销量",
				// 	flag: true,
				// 	flags: true,
				// 	img: false //判断是否要图片
				// }, {
				// 	name: "推荐",
				// 	flag: true,
				// 	flags: true,
				// 	img: false //判断是否要图片
				// }, {
				// 	name: "价格",
				// 	flag: false,
				// 	flags: true,
				// 	img: false //判断是否要图片
				// }, {
				// 	name: "筛选",
				// 	flags: false, //判断是否要箭头
				// 	img: true //判断是否要图片
				// }, ],
			}
		},
		props:{
			titlelist:{type:Array,default:[]},
			current: {type:Number,default:0},
			flagwith:{type:Boolean,default:true}
		},
		methods: {
			dianji(v) {
				this.$emit("dianji",v)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.topbox {
		display: flex;
		height: 100rpx;
		line-height: 100rpx;
		padding-left: 20rpx;
		box-sizing: border-box;

		.title {
			display: flex;
			width: 110rpx;
			margin-left: 20rpx;
			align-items: center;
		}
		.titles{
			display: flex;
			width: 200rpx;
			margin-left: 20rpx;
			align-items: center;
		}

		image {
			width: 29rpx;
			height: 25rpx;
			margin-top: 5rpx;
			margin-left:5rpx;
		}

		.name {
			font-family: SourceHanSansCN-Regular;
			font-size: 28rpx;
			letter-spacing: 0rpx;
			color: #666666;
		}

		.selectname {
			font-family: SourceHanSansCN-Regular;
			font-size: 28rpx;
			letter-spacing: 0rpx;
			color: #f73f33;
		}

		.anglebox {
			margin-left: 10rpx;

			.anlges {
				width: 0;
				height: 0;
				border-left: 10rpx solid transparent;
				border-right: 10rpx solid transparent;
				border-bottom: 10rpx solid #f73f33;
			}

			.anlgess {
				width: 0;
				height: 0;
				border-left: 10rpx solid transparent;
				border-right: 10rpx solid transparent;
				border-bottom: 10rpx solid #919191;
			}

			.anlgesxia {
				width: 0;
				height: 0;
				border-left: 10rpx solid transparent;
				border-right: 10rpx solid transparent;
				border-top: 10rpx solid #919191;
				margin-top: 10rpx;
			}

			.anlgesxias {
				width: 0;
				height: 0;
				border-left: 10rpx solid transparent;
				border-right: 10rpx solid transparent;
				border-top: 10rpx solid #f73f33;
				margin-top: 10rpx;
			}
		}
	}
</style>
